<template>
    <el-main>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumbNameP }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ breadcrumbName }}</el-breadcrumb-item>
      </el-breadcrumb>
      <el-form :inline="true" :model="formInline" class="el-form query-form el-form--label-right el-form--inline">
        <el-form-item label="违规人">
          <el-input size="small" v-model="formInline.driver_name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="违规类型">
        <el-select size="small" v-model="formInline.type" placeholder="请选择" filterable>
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in driverType" :key="item.code" :value="item.code" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="发布日期">
          <el-date-picker v-model="formInline.pubdate" type="date" placeholder="选择日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd">
        </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch" icon="el-icon-search">搜 索</el-button>
          <el-button size="small" type="default" @click="handleAdd" icon="el-icon-plus">添加违规内容
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="margin-top:30px" row-key="id">
      <!-- :formatter="formatTruckCard" -->
        <el-table-column prop="id" label="序号" ></el-table-column>
        <el-table-column prop="driver_name" label="违规人员" ></el-table-column>
        <el-table-column prop="truck_card" label="车辆"></el-table-column>
        <el-table-column prop="dept_name" label="所属DC"></el-table-column>
        <el-table-column prop="violation_name" label="违规类型"></el-table-column>
        <el-table-column prop="create_dt" label="发布时间"></el-table-column>
        <el-table-column label="操作" :width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="default" @click="handleView(scope.$index, scope.row)">查看</el-button>
            <el-button size="mini" type="primary" @click="handleDelete(scope.$index, scope.row)">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handleCurrentChange" :current-page="formInline.page" :page-size="formInline.limit"
        :hide-on-single-page="true" layout="total, prev, pager, next" :total="total">
      </el-pagination>
      <el-dialog :title="dialogTitle" :visible.sync="addDialogVisible" width="40%" center :before-close="beforeClose"
        custom-class="center_dislog">
        <el-form ref="editForm" :model="editForm" label-width="80px" :rules="addRules">
         <!-- 违规司机 -->
          <el-form-item label="违规司机" prop="driver_id">
            <el-select v-model="editForm.driver_id" placeholder="请选择" filterable @change="selectTruk">
              <el-option v-for="(item,index) in driverGround" :key="index" :label="item.driver_name"
                :value="item.driver_id">
              </el-option>
            </el-select>
          </el-form-item>
            <!-- 违规车辆 -->
            <el-form-item label="违规车辆" prop="truck_card">
            <el-select v-model="editForm.truck_card" placeholder="请选择" filterable>
              <el-option v-for="(item,index) in DriverViolation" :key="index" :label="item.truck_card"
                :value="item.truck_card">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 违规类型 -->
          <el-form-item label="违规类型" prop="type">
            <el-select v-model="editForm.type" placeholder="请选择" filterable>
              <el-option v-for="(item,index) in driverType" :key="index" :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发生时间" prop="bad_time">
            <el-date-picker v-model="editForm.bad_time" type="date" placeholder="选择日期" format="yyyy - MM - dd " value-format="yyyy-MM-dd">
        </el-date-picker>
          </el-form-item>
           <!-- 违规内容 -->
          <el-form-item label="违规内容" prop="contents">
            <el-input v-model="editForm.contents" placeholder="请输入"  type="textarea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="beforeClose">取 消</el-button>
          <el-button type="primary" :disabled="isDisabled" @click="addSubmit">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </template>
  <script>
    import {
      mapState
    } from 'vuex'
    import {
      violationList,
      addViolation,
      editViolation,
      deleteViolation,
      getDriverList,
      ViolationDriverList,
      ViolationTruckList
    } from '../../api.js'
    export default {
      name: "runMangeViolation",
      data() {
        return {
          isAdd: true,
          isDisabled: false,
          addDisabled:false,
          addDialogVisible: false,
          dialogTitle: '',
          breadcrumbName: '',
          breadcrumbPath: '',
          breadcrumbNameP: '',
          tableData: [],
          driverGround: [],
          DriverViolation:[],
          driverType:[],
          //查询栏默认展示数据
          formInline: {
            driver_name: '',
            type:'',
            pubdate:'',
            page: 1,
            limit: 5
          },
          editForm: {
            driver_id:'',
            type:'',
            bad_time:'',
            contents:'',
            truck_card:''
          },
          //分页
          total: 0,
          addRules: {
            DriverName: [{
              required: true,
              message: '请输入司机名称',
              trigger: 'blur'
            }],
            DriverGroup: [{
              required: true,
              message: '请选择司机分组',
              trigger: 'blur'
            }],
            Phone:[{
              required: true,
              message: '请输入手机号',
              trigger: 'blur'
            }],
          },
        }
      },
      async mounted() {
        this.breadcrumbName = this.$route.query.breadcrumbName
        this.breadcrumbPath = this.$route.query.breadcrumbPath
        this.breadcrumbNameP = this.$route.query.breadcrumbNameP
        this.getDriver()
        this.driverType = await this.common.getCode(this.baseUrl, 'violation_type ', this.Token)
        this.getTableDate(this.formInline)
      },
      methods: {
        getDriver(){
          ViolationDriverList().then(res => {
            if (res.ErrorCode == 0) {
               this.driverGround = res.Data.list
            } else {
              this.$message.error(res.ErrorMsg);
            }
          })
        },
        getTableDate(searchObj) {
          violationList(searchObj).then(res => {
            if (res.ErrorCode == 0) {
               this.tableData = res.Data.list
               this.total = res.Data.total
            } else {
              this.$message.error(res.ErrorMsg);
            }
          })
        },
        // 添加 
        handleAdd() {
          this.isAdd = true
          this.addDialogVisible = true;
          this.dialogTitle = '添加';
          for (var k in this.editForm) {
            this.editForm[k] = ''
          }
        },
        //编辑
        handleEdit(index, row) {
          this.isAdd = false
          this.dialogTitle = '编辑';
          this.editForm.driver_id = row.driver_id
          this.editForm.type = row.violation_type+'';
          this.editForm.id = row.id;
          this.editForm.bad_time = row.pubdate
          this.editForm.contents = row.phone
          this.editForm.truck_card = row.truck_card
          this.addDialogVisible = true;
        },
        //表格分页
        handleCurrentChange(val) {
          this.formInline.page = val;
          this.getTableDate(this.formInline)
        },
        //表格查询
        onSearch() {
          this.formInline.page = 1;
          this.getTableDate(this.formInline)
        },
        handleView(){

        },
        //刪除
        handleDelete(index, row) {
          var _this = this
          _this.$confirm('此操作將撤销该数据, 是否继续？', '提 示', {
            confirmButtonText: '确 定',
            cancelButtonText: '取 消',
            center: true
          }).then(() => {
            var data = {
              id : row.id,
            }
            deleteViolation(data).then(res => {
              if (res.ErrorCode == 0) {
                  _this.getTableDate(_this.formInline);
                  _this.$message.success("撤销成功");
              } else {
                this.$message.error(res.ErrorMsg);
              }
            })
          }).catch(() => {});
        },
        selectTruk(e){
          var _this = this
          this.editForm.truck_card = "";
          var data={
            driver_id:e,
          }
          ViolationTruckList(data).then(res => {
              if (res.ErrorCode == 0) {
                _this.DriverViolation = res.Data
              } else {
                this.$message.error(res.ErrorMsg);
              }
            })
        },
        //提交
        addSubmit() {
          this.$refs['editForm'].validate((valid) => {
            if (valid) {
              var _this = this;
              _this.isDisabled = true;
              var dataObj = JSON.parse(JSON.stringify(_this.editForm)) ;
             
              if(_this.isAdd){
                addViolation(dataObj).then(res => {
                  if (res.ErrorCode == 0) {
                      _this.addDialogVisible = false;
                      _this.$message.success("添加成功");
                      _this.getTableDate(_this.formInline);
                      _this.isDisabled = false;
                  } else {
                      _this.isDisabled = false;
                    this.$message.error(res.ErrorMsg);
                  }
                })
              }else{
                editViolation(dataObj).then(res => {
                  if (res.ErrorCode == 0) {
                    _this.addDialogVisible = false;
                      _this.$message.success("添加成功");
                      _this.getTableDate(_this.formInline);
                      _this.isDisabled = false;
                  } else {
                      _this.isDisabled = false;
                    this.$message.error(res.ErrorMsg);
                  }
                })
              }
            }
          })
        },
        handleView(index, row) {
         this.$router.push({
          path: '/runMange/violation_Detail',
          query: {
            id: row.id
            }
          })
      },
        beforeClose() {
          this.addDialogVisible = false
          this.$refs.editForm.resetFields();
        },
        formatNorm(row, column, cellValue) {
          return row.loadRangeMin + '~' + row.loadRangeMax
        },
          handleRemove(file, fileList) {
          console.log(file, fileList);
        },

      
      },
      computed: {
        ...mapState({
          baseUrl: state => state.baseUrl,
          Token: state => state.access_token,
        }),
      },
    }
  </script>
  
  <style scoped>
    main>>>.el-icon-date {
      right: -30px;
    }
  
    main>>>.el-date-editor.el-input.el-date-editor--date {
      width: 100%;
    }
  
    .tips {
      color: #f56c6c;
      font-size: 12px;
    }
  
    main>>>.el-form-item__content {
      line-height: 24px;
    }
  </style>